import {
  Card,
  Breadcrumb,
  Form,
  Input,
  Radio,
  Space,
  Button,
  Upload,
  Modal,
  message,
} from 'antd';
import { getChannels } from 'api/channel';
import { useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import styles from './index.module.scss';
import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request';
import { publishArticle, getArticleDetail, editArticle } from 'api/articles';
import history from 'utils/history';
import Channel from 'components/Channel';

export default function ArticleList(props) {
  // 判断是否有id,有id是编辑，没id是发布文章
  const [articleId, setArtticleId] = useState(props.location.state);
  //   console.log(28, props.location.state);
  // 存草稿参数
  const draftRef = useRef(false);
  //   图片上传组件的默认图片
  const [fileList, setFileList] = useState([]);
  //   图片上传
  const uploadImages = ({ fileList }) => {
    console.log(35, fileList);
    setFileList(fileList);
  };
  const [type, setType] = useState(0);
  //  设置图片的类型，控制图片上传数量

  const changeImageType = (e) => {
    // console.log(e);
    setType(e.target.value);
  };
  const [showPreview, setShowPreview] = useState(false);
  const [previewUrl, setPreviewUrl] = useState('');
  //   预览图片
  const handlePreview = (file) => {
    // console.log(file);
    // 情况1：如果 fileList 是将来后端回显的，通过 url 就能够访问到
    // 情况2：如果 fileList 的文件是上传的，需要通过 file.response.data.url 获取
    const url = file.url || file.response.data.url;
    setShowPreview(true);
    setPreviewUrl(url);
  };
  const handleCancel = () => {
    setShowPreview(false);
    setPreviewUrl('');
  };

  // 上传前的校验
  const beforeUpload = (file) => {
    console.log(file);
    // 判断图片的带下 不能超过 5M
    if (file.size >= 1024 * 100 * 5) {
      message.warning('上传的文件不能超过500kb');
      return Upload.LIST_IGNORE;
    }
    // 判断图片格式
    if (!['image/png', 'image/jpeg', 'image/gif'].includes(file.type)) {
      message.warning('只能上传jpg或者png的图片');
      return Upload.LIST_IGNORE;
    }
    message.success('图片上传成功');
    return true;
  };
  /*将生成的表单实例连接到表单元素，
    给需要控制的表单元素设置form属性，newVal是新值*/
  //生成表单实例
  /*通过setFieldsValue设置表单item的值，其中，
	name是Form.item的name值*/
  const [formRef] = Form.useForm();
  //   获取文章详情
  const getArticleById = async (id) => {
    // console.log(85, id);
    const res = await getArticleDetail(id);
    // console.log(res);
    const values = {
      ...res.data,
      type: res.data.cover.type,
    };
    // 给表单设置values值
    // console.log(106, formRef);
    await formRef.setFieldsValue(values);
    const fileList = res.data.cover.images.map((item) => {
      return {
        url: item,
      };
    });
    // console.log(107, fileList);
    setType(res.data.cover.type);
    setFileList(fileList);
  };
  useEffect(() => {
    if (articleId) getArticleById(articleId.id);
    //   挂载时
  }, []);
  //   表单提交事件
  const onFinish = async (values) => {
    // console.log(values);
    // 图片数量校验
    if (type !== fileList.length) {
      return message.warning('上传的图片数量不对');
    }
    const images = fileList.map((item) => {
      return item.url || item.response.data.url;
    });
    // 有id，修改文章，没id，发布文章
    if (articleId) {
      await editArticle(
        {
          ...values,
          // 封面数据
          cover: {
            type,
            images,
          },
          id: articleId.id,
          //  草稿参数
        },
        draftRef.current
      );
      message.success('修改成功');
    } else {
      await publishArticle({
        ...values,
        // 封面数据
        cover: {
          type,
          images,
        },
        //  草稿参数
        draft: draftRef.current,
      });
      message.success('发布成功');
    }
    history.push('/list');
  };
  return (
    <div className={styles.root}>
      <Card
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              {articleId ? '编辑文章' : '发布文章'}
            </Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form
          name="basic"
          form={formRef}
          size="large"
          labelCol={{ span: 4 }}
          // 设置字段触发验证的时机
          validateTrigger={['onBlur', 'onChange']}
          initialValues={{
            type: 0,
            content: '',
            channel_id: 0,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[
              {
                required: true,
                message: '标题内容不能为空,请输入文章标题',
              },
            ]}
          >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: '请选择文章频道' }]}
          >
            <Channel allowClear></Channel>
          </Form.Item>
          <Form.Item
            label="内容"
            name="content"
            rules={[
              {
                required: true,
                // 这里不要加message了，message有优先级
                validator: (_, value) => {
                  //   console.log(value);
                  //   判断value的值 返回失败的信息
                  // 1.判断是否为空标签
                  // 2.使用自定义校验
                  return value === '<p><br></p>' || !value
                    ? Promise.reject(new Error('内容不能为空'))
                    : Promise.resolve();
                },
              },
            ]}
          >
            <ReactQuill theme="snow" placeholder="请输入文章内容..." />
          </Form.Item>
          <Form.Item label="封面" name="type">
            <Radio.Group onChange={changeImageType}>
              <Radio value={0}>无图</Radio>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4 }}>
            {/* 根据type控制图片的显示 */}
            {type !== 0 && (
              <Upload
                listType="picture-card"
                name="image"
                fileList={fileList}
                action={`${baseURL}/upload`}
                onChange={uploadImages}
                onPreview={handlePreview}
                beforeUpload={beforeUpload}
              >
                {/* 控制图片的上传数据 */}
                {fileList.length < type && <UploadOutlined />}
              </Upload>
            )}
          </Form.Item>
          {/* 弹窗，用于显示预览的图片 */}
          <Modal
            visible={showPreview}
            title="图片预览"
            footer={null}
            onCancel={handleCancel}
          >
            <img
              alt="example"
              style={{ width: '100%', objectFit: 'cover' }}
              src={previewUrl}
            />
          </Modal>
          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                {articleId ? '编辑文章' : '发布文章'}
              </Button>
              <Button
                htmlType="submit"
                onClick={() => {
                  draftRef.current = true;
                }}
              >
                存草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
